<template>
	<div class="spu-common">
	  	<div id="edit-container" class="spu-container" v-bind:class="showEditContainerObj">
	  		<div class="transparent-bg"></div>
		    	<div class="transparent-content">
		    		<div class="header">
			    		<div class="header-img fl"><img id="header-img" src="" /></div>
			    		<div class="header-content">
			    			<div class="header-content-title" id="header-content-title">
			    				嘉实多全合成保养套餐
			    			</div>
			    			<div class="header-content-price">
			    				<span class="price-before" id="header-content-price-after">¥ <span class="price-info">123123</span>.00</span>
			    				<span class="price-after" id="header-content-price-before" >原价 ¥ 0.00</span>
			    			</div>
			    		</div>
			    	</div>
			    	<ul id="spuInfo" class="content-list">
			    		<li  id="ld1" v-for="levelList in contentList" class="h_box">
			    			<div class="spu-title">{{levelList.attrName | removeLetters }}</div>
			    			<div class="level1" v-for="level in levelList.attrValueList" v-bind:status="level.status" @click.self="changeStatus">
			    				{{level.attrValue}}
			    			</div>
			    		</li>
			    		<!-- <li id="ld1" v-for="levelList in contentList" >
			    			<div class="spu-title">{{ titleList[$index] }}：</div>
			    			<div id="" v-for="level  in levelList" class="level1" v-bind:status="level.status" v-on:click.self="changeStatus($event,$index,$parent.$index, level.status, level.name)">{{level.name}}</div>
			    		</li> -->
			    	</ul>
			    	<div class="footer">
			    		<input id="select-btn-ok" type="button" class="btn" v-on:click="changeService" value="确定" />
			    	</div>
		    	</div>
		</div>
		<div id="edit-mask" class="edit-mask" v-bind:style="showEditMaskObj"></div>
	</div>
</template>

<script>
export default {
	
  	name: 'spu-common',
  	data () {
	    return {
	    	showEditContainerObj: {
	    		'slideUp': true,
	    		'slideDown': false
	    	},
	    	showEditMaskObj: {
	    		display: 'block'
	    		//mask放入外层div中不用指定height高度
	    		//height: window.outerHeight+'px'
	    	},
	    	spuObj: {},
	    	titleList: [],
	    	contentList: [],
	    	serviceMap: {} 
	    }
  	},
  	events: {
  		// 更改弹层状态
  		'spu-common-show' (e) {
  			this.showSpuCommon();
  		},
  		'spuCommonDataEvent' ( d ) {
  			// this.contentList = d.saleAttrList;
  			this.renderSpuList(d.saleAttrList);
  		}
  	},
  	methods: {
  		showSpuCommon () {
	  		this.showEditContainerObj['slideUp'] = true;
	  		this.showEditContainerObj['slideDown'] = false;
	  		this.showEditMaskObj['display'] = 'block';
	  	},
	  	closeSpuCommon () {
	  		this.showEditContainerObj['slideUp'] = false;
	  		this.showEditContainerObj['slideDown'] = true;
	  		this.showEditMaskObj['display'] = 'none';
	  	},
	  	changeService () {
	  		this.closeSpuCommon();
	  	},
	  	// 渲染Spu
	  	renderSpuList ( spuObj ) {
	  		this.contentList = spuObj;
	  	},
	  	changeStatus () {
	  		console.log(123);	
	  	}

	  	// renderSpuList (spuObj) {
	  	// 	var _titleList = [];
	  	// 	var _contentList = [];
	  	// 	var _serviceMap = {};
	  	// 	var _this = this;
	  	// 	console.log("spuObj:"+ JSON.stringify(spuObj));
	  	// 	function deepObj (o, currentDeep) {
	  	// 		for (var p in o) {
	  	// 			console.log(p);
	  	// 			console.log( Object.prototype.toString.call(o[p]));
	  	// 			console.log( JSON.stringify(o[p]));
	  	// 			if (p === 'title') {
	  	// 				_titleList.push(o[p]);
	  	// 			}
	  	// 			if (p === 'list') {
	  	// 				if (Object.prototype.toString.call(o[p]) === '[object Array]') {
	  	// 					console.log("currentDeep:"+currentDeep)
				//   			//currentDeep 当前遍历的深度
				//   			if (_contentList[currentDeep] === undefined) {
				//   				//初始化一二三四 数组
				// 				_contentList[currentDeep] = [];
				//   			}
		  // 					var list = o[p];
		  // 					console.log(list);
		  // 					for (var i in list) {
		  // 						console.log("遍历对象了");
			 //  					console.log(list[i].content);
			  					
			 //  					if (Object.prototype.toString.call(list[i].content) === '[object Object]') {
		  // 							//深度加深一层
		  // 							_contentList[currentDeep].push(list[i].name);
		  // 							deepObj(list[i].content, currentDeep+1);
		  							
		  // 						}else {
		  // 							//已经到最底层了 SOOO1 SOOO2 添加服务code
		  // 							_contentList[currentDeep].push(list[i].name);
		  // 							//填充map对象
		  // 							var key = getKey(_contentList);
		  // 							if (_serviceMap[key] ===  undefined) {
		  // 								_serviceMap[key] = [list[i].name];
		  // 							} else {
		  // 								_serviceMap[key].push(list[i].name);
		  // 							}
		  // 						}
		  // 					}
		  // 				}else {
		  					
		  // 				}
	  	// 			}
	  				
	  	// 		}
	  	// 	}
	  	// 	deepObj(spuObj, 0);
	  	// 	function getKey(_contentList) {
	  	// 		//嘉实多-全合成- 4L
	  	// 		var _key = '';
	  	// 		for (var i= 0; i< _contentList.length-1; i++) {
	  	// 			var list = _contentList[i];
	  	// 			_key += list[list.length-1];
	  	// 		}
	  	// 		return _key;
	  	// 	}
	  	// 	function uniqueList (list) {
	  	// 		list = list || [];
	  	// 		var _list = [];
	  	// 		for (var i=0; i<=list.length-1; i++) {
	  	// 			if (!(_list.indexOf(list[i]) !== -1)) {
	  	// 				_list.push(list[i]);
	  	// 			}
	  	// 		}
	  	// 		return _list;
	  	// 	}

	  	// 	_this.titleList = _titleList;
	  	// 	var __contentList = _contentList.slice(0, _contentList.length-1);
	  	// 	for (var i=0; i<=__contentList.length-1; i++) {
	  	// 		__contentList[i] = uniqueList(__contentList[i]);
	  	// 	}

	  	// 	//contentList改造设置默认值
	  	// 	function setContentListStatus (contentList) {
	  	// 		for (var i=0; i<= contentList.length-1; i++) {
	  	// 			var list = contentList[i];
	  	// 			for (var j=0; j<list.length; j++) {
	  	// 				var name = list[j];
	  	// 				//0未选中 1选中  2不存在
	  	// 				list[j] = {'name': name, 'status': '0'};
	  	// 			}
	  	// 		}
	  	// 	}

	  	// 	setContentListStatus(__contentList);

	  	// 	_this.contentList = __contentList;
	  	// 	_this.serviceMap = _serviceMap;
	  	// 	console.log( JSON.stringify(_serviceMap));
	  	// },

	  	// changeStatus ($event,index,parntIndex, status, name) {
	  	// 	console.log($event,index, parntIndex,status,name);
	  	// 	var target = $event.target;
	  	// 	var _contentList = this.contentList;
	  	// 	var _currKey = '';
	  	// 	for (var i=0; i<=_contentList.length-1; i++) {
	  	// 		var _currlevelLsit = _contentList[i];
	  	// 		for (var j=0; j<=_currlevelLsit.length-1 ; j++) {
	  	// 			//重置当前行
	  	// 			if (i === parntIndex) {
	  	// 				var _currLevel = _currlevelLsit[j];
	  	// 				_currLevel.status = '0';
	  	// 				if (index === j) {
		  // 					_currLevel.status = '1';
			 //  			}
	  	// 			}
	  	// 		}
	  	// 	}
	  	// 	for (var i=0; i<=_contentList.length-1; i++) {
	  	// 		var _currlevelLsit = _contentList[i];
	  	// 		for (var j=0; j<=_currlevelLsit.length-1 ; j++) {
	  	// 			var _currLevel = _currlevelLsit[j];
	  	// 			//封装map key
	  	// 			if (_currLevel.status === '1') {
	  	// 				_currKey += _currLevel.name;
	  	// 			}
	  	// 		}
	  	// 	}
	  	// 	var _serviceMap = this.serviceMap;
	  	// 	if (_serviceMap[_currKey]) {
	  	// 		console.log(_currKey);
	  	// 		console.log("有服务");
	  	// 	}else {
	  	// 		console.log(_currKey);
	  	// 		console.log("无服务");
	  	// 	}
	  	// }
  	},
  	created () {
    		console.log("created");
  	},
  	ready () {
  		console.log('ready');	

  		// this.$on('spu-common-show', function (ee) {
  		// 	//添加回调函数
  		// 	console.log("ee:"+ee);
  		// });
  		

  		//请求spu数据
  		// this.$http({url: '/static/json/spu-common.json', data:{'param1': 0}, emulateJSON: true, method: 'GET'}).then(function (response) {
    //         //
    //         console.log("response"+ JSON.stringify(response.body));
    //         this.spuObj= response.body;
    //         this.renderSpuList(this.spuObj);
       // });

  	},

  	destroyed () {
    		console.log("destroyed");
  	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/_variables.scss';
@import '../../assets/css/_functions.scss';

 .spu-container {
	position: fixed;
	z-index: 100;
	bottom: 0;
	width: rem(375);
	transform: translateX(0) translateY(100%);
	-webkit-transform: translateX(0) translateY(100%);
	.transparent-bg {
		width: rem(375);
		height: rem(30);
	}
	.transparent-content {
		background: $_fff;
	}
  	.header {
  		border-bottom: 1px solid $_eee;
	  	min-height: rem(100);
	  	.header-img {
			background: $_fff;
			position: relative;
			top: - rem(30);
			left: rem(10);
			width: rem(110);
			height: rem(110);
			overflow: hidden;
			padding: rem(6);
			box-sizing: border-box;
			border-radius: rem(6);
			img {
				background: #d8d8d8;
				width: rem(98);
				height: rem(98);
			}
		}
		.header-content {
		  	padding-top: rem(10);
		  	padding-left: rem(124);
		  	.header-content-title {
		  		font-size: rem(16);
		  		line-height: rem(24);
		  		color: $_666;
			}
		}
		.header-content-price {
  			line-height: rem(30);
  			.price-before {
			  	font-size: rem(16);
			  	color: $_ff0000;
			  	.price-info {
			  		font-size: rem(18);
			  	}
			}
			.price-after {
  				font-size: rem(11);
  				color: $_999;
  				margin-left: rem(12);
			}
		}
	}
	ul.content-list {
		padding-left: rem(16);
		padding-top: rem(4);
		#ld1 {
			height: rem(28);
			line-height: rem(28);
			margin-bottom: rem(12);
		}
		.spu-title {
			margin-right: rem(16);
			width: rem(52);
		}
		.level1 {
			padding: 0 rem(10);
			height: rem(28);
			background: $_f4f4f4;
			text-align: center;
			line-height: rem(28);
			margin-right: rem(12);
			border-radius: rem(4);
		}
	}
	// ul.content-list {
	//   	background: #ffffff;
	//   	padding-top: rem(12.5);
	//   	padding-left: rem(80);
	//   	div {
	// 	  	position: relative;
	// 	  	.spu-title {
	// 		  	position: absolute;
	// 		  	top: 0;
	// 		  	left: rem(-80);
	// 		  	padding-left: rem(12.5);
	// 		  	text-align: left;
	// 		  	font-size: rem(12);
	// 		  	color: #999999;
	// 		  	height: rem(25);
	// 		  	line-height: rem(25);
	// 		}
	// 		div[status] {
	// 		  	box-sizing: border-box;
	// 		  	padding: 0 rem(15);
	// 		  	margin-right: rem(10);
	// 		  	margin-bottom: rem(10);
	// 		  	float: left;
	// 		  	height: rem(25);
	// 		  	line-height: rem(25);
	// 		  	text-align: center;
	// 		  	font-size: rem(12);
	// 		  	color: #333333;
	// 		}
	// 		div[status='1'] {
	// 		  	border: 1px solid #03a9f4;
	// 		  	color: #03a9f4;
	// 		  	border-radius: 3px;
	// 		  	background-image: url("http://s1.cximg.com/cms/wap/resource/chexiangjiaM/serviceDetail/images/XBYSPU/label_26c4c3141ead2fd258922ed54d98808b.png");
	// 		  	background-repeat: no-repeat;
	// 		  	background-position: bottom right;
	// 		  	background-size: rem(12.5) rem(12.5);
	// 		}
	// 		div[status='0'] {
	// 		  	border: 1px solid #03a9f4;
	// 		  	color: #999999;
	// 		  	border-radius: 3px;
	// 		}
	// 		div[status='2'] {
	// 		  	border: 1px dotted #999999;
	// 		  	color: #999999;
	// 		  	border-radius: 3px;
	// 		}
	// 		&:after {
	// 		  	display: block;
	// 		  	content: '';
	// 		  	height: 0;
	// 		  	line-height: 0;
	// 		  	visibility: hidden;
	// 		  	clear: both;
	// 		}
	// 	}
	// }
	.footer {
	  	width: 100%;
	  	margin-top: rem(20);
	  	.btn {
	 	 	width: 100%;
		  	height: rem(45);
		  	background: #03a9f4;
		  	font-size: rem(16);
		  	text-align: center;
		  	letter-spacing: rem(7.5);
		  	color: #ffffff;
		  	border-radius: 0;
		  	border: none;
		}
	  	
	}
}
 .edit-mask {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.3);
}
 .slideUp {
  animation: slideUp 400ms ease-in forwards;
  -webkit-animation: slideUp 400ms ease-in forwards;
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
  100% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
}
 .slideDown {
  animation: slideDown 400ms ease-in forwards;
  -webkit-animation: slideDown 400ms ease-in forwards;
}
@-webkit-keyframes slideDown {
  0% {
    transform: translateX(0) translateY(0);
    -webkit-transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(100%);
    -webkit-transform: translateX(0) translateY(100%);
  }
}

</style>
